<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php include("facebook_include.php");?>
<?php
    $userName = getUserName();
    $userId = getUserId(); 
    $userFirstName = getUserFirstName();
    $userZipCode = getUserZipCode();
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Share A Walk</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

    <script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

    <link rel="stylesheet" type="text/css" href="stylesheets/tabs.css" />	
    <link rel="stylesheet" type="text/css" href="stylesheets/basic.css" />
		<link rel="stylesheet" type="text/css" href="stylesheets/help.css" />
		<link rel="stylesheet" type="text/css" href="stylesheets/scrollHorizontal.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/scrollButtons.css" />

		 <script type="text/javascript" charset="utf-8">
			
		
											
	      //Make sure the page has completely loaded before loading any jS
	      jQuery.noConflict();
	      var $j = jQuery;
	      $j(function()
	      {
	       
					$j(".videoPreviewContainer div.scrollable").scrollable();

	      });
				
				function displayContent(toDisplay)
				{
					
					 var data = 'typeOfContent=' + "video"+ '&whichVideo='  + toDisplay;
					 $j.ajax({  
	             //this is the php file that processes the data and send mail  
	             url: "getHelpContent.php",   
	               
	             //GET method is used  
	             type: "GET",  
	   
	             //pass the data           
	             data: data,       
	               
	             //Do not cache the page  
	             cache: false,  
	               
	             //success  
	             success: function (html) {
                    $j('#contentContainer > *').remove();
										$j("#contentContainer").append(html);
                 }         
	         });
				}
				
				function displayTextContent(whichLink)
				{
					var data = 'typeOfContent=' + "text"+ '&whichFaq='  + whichLink;
					 $j.ajax({  
	             //this is the php file that processes the data and send mail  
	             url: "getHelpContent.php",   
	               
	             //GET method is used  
	             type: "GET",  
	   
	             //pass the data           
	             data: data,       
	               
	             //Do not cache the page  
	             cache: false,  
	               
	             //success  
	             success: function (html) {
                 	$j('#contentContainer > *').remove();
									$j('#contentContainer').load("index.php");
                 }         
	         });
				
				}
	    </script>
	</head>
		<body>
	   
	    <div id="title"><h1>Share A Walk</h1></div>
	    <div class="motivationInfo">
          <div class="badge" id="badge"><img src="images/trophy.png"/></div>	
          <div class="visitsFavourites">
            <b>Hi <?php echo $userFirstName?>!</b><br/>
            You are at Level: 1<br />
            Walks visited: 10 <br />
            Walks favorited: 5 
          </div>
        </div>

	    <div id="header">
	      <ul id="primary">
	        <li><a href="home.php">Walker Home</a></li>
	        <li><a href="walks.php">Walks</a></li>
	        <li><a href="profile.php">Walker Profile</a></li>
	        <li><span>Help</span></li>
	      </ul>
	    </div>
	    <div id="main">
	      <h4 style="margin-top:0px;margin-left:10px;margin-bottom:0px;color:#242424;">Documentation and Video Tutorials</h4>
	      <div id="contents">
	      	<div id="contentContainer" class="contentContainer">
	      		<h3 style="text-align:center;margin-top:175px;">The Videos and the textual <br />content are displayed here.</h3>
	      	</div>
	      	<div id="faqContainer" class="faqContainer">
	      		<h3 style="text-align:center;"> Frequently Asked Questions </h3>
						<table>
							<tr>
								<td><a href="#" onClick="displayTextContent(0);">How to share a walk?</td>
							</tr>	
							<tr>
								<td><a href="#" onClick="displayTextContent(1);">How to add photos of interesting points?</td>
							</tr>
							<tr>
								<td><a href="#" onClick="displayTextContent(2);">How to create a walk?</td>
							</tr>
							<tr>
								<td><a href="#" onClick="displayTextContent(3);">How to edit a walk?</td>
							</tr>
							<tr>
								<td><a href="#" onClick="displayTextContent(4);">How to mark as visited? </td>
							</tr>
							<tr>
								<td><a href="#" onClick="displayTextContent(5);">How to favourite a walk?</td>
							</tr>
							<tr>
								<td><a href="#" onClick="displayTextContent(6);">How to print out the map for a walk?</td>
							</tr>
							<tr>
								<td><a href="#" onClick="displayTextContent(7);">How to invite friends for a walk?</td>
							</tr>
							<tr>
								<td><a href="#" onClick="displayTextContent(8);">How to add and invite new friends to use this application? </td>
							</tr>
						</table>
	      	</div>
	      	<div id="videoPreviewContainer" class="videoPreviewContainer">
	      			
								<!-- "previous page" action -->
								<a class="prevPage browse left"></a>
								<!-- root element for scrollable -->
								<div class="scrollable">	
								<!-- root element for the items -->
									<div class="items">

													<div class="eachWalk">
															<img id="share" onCLick="displayContent(0);" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
															<p style="text-align:center;">Share a walk</p>
													</div>
													<div class="eachWalk">
															<img id="addPhoto" onCLick="displayContent(1);" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
															<p style="text-align:center;">Add Photos</p>
													</div>
													<div class="eachWalk">
															<img id="edit" onCLick="displayContent(2);" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
															<p style="text-align:center;">Edit walk</p>
													</div>
													<div class="eachWalk">
															<img id="create" onCLick="displayContent(3);" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
															<p style="text-align:center;">Create a walk</p>	
													</div>
													<div class="eachWalk">
															<img id="visited" onCLick="displayContent(4);" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
															<p style="text-align:center;">Mark as Visited</p>
													</div>
													<div class="eachWalk">
															<img id="favourited" onCLick="displayContent(5);" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
															<p style="text-align:center;">Mark as Favourite</p>
													</div>
													<div class="eachWalk">
															<img id="print" onCLick="displayContent(6);" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
															<p style="text-align:center;">Print out the map</p>
													</div>
													<div class="eachWalk">
															<img id="invite" onCLick="displayContent(7);" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
															<p style="text-align:center;">Invite Friends for walk</p>
													</div>
													<div class="eachWalk">
															<img id="add" onCLick="displayContent(8);" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
															<p style="text-align:center;">Add new Friends</p>
													</div>
									</div>
								</div>
								<!-- "next page" action -->
								<a class="nextPage browse right"></a>
								<br clear="all" />
								
	      	</div>
	      </div>
			</div>
		</body>
</html>
   
